<template>
    <div class="QuestRecommend">
        <div class="header">
            <span @click="linkcom()"  class="header-fir">邀请回答</span>
            <span @click="linkfor()" class="header-fir">为你推荐</span>
            <span @click="linknew()" class="header-fir">最新问题</span>
            <span @click="linkplan()"  class="header-fir">致知计划</span>
        </div>
        <div>
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
    export default {
        name: "QuestRecommend",
        data(){
            return{
                form:[],
                // data:[]
            }
        },
        mounted() {
            this.getlist()
        },
        methods:{
            getlist(){
                this.$axios.get('/api/questrecommend.json').then((res)=>{
                    this.form=res.data.data
                })
            },
            linkcom(){
                this.$router.replace({name:'childquestrecommend'})
            },
            linkfor(){
                this.$router.replace({name:'requestfor'})
            },
            linknew(){
                this.$router.replace({name:'questnew'})
            },
            linkplan(){
                this.$router.replace({name:'questplan'})
            }
        }
    }
</script>

<style scoped>
    .QuestRecommend{
        width: 100%;
        background: white;
    }
    .QuestRecommend .header{
        width: 100%;
        height: 50px;
        border-bottom:1px solid rgba(133,144,166,.12);
    }
    .QuestRecommend .header-fir:first-of-type{
        margin-left: 10px;
    }
    .QuestRecommend .header-fir{
        display: inline-block;
        margin-left: 35px;
        margin-top: 12px;
    }
    .QuestRecommend .header-fir:last-of-type{
       font-family: "Eras Light ITC";
        color: #0084ff;
        font-size: 17px;
        font-weight: 500;
    }


</style>
